/**
  订阅页面
*/
.subscription {
  background-image: url("~@/static/images/sunny.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  &::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .1);
  }
  .k-header .header-content {
    background-color: rgba(255, 255, 255, .1);
  }
  .main-content {
    border: none;
    min-height: 100vh;
    position: relative;

    .tip-title {
      color: var(--white);
      font-weight: 600;
      font-size: 1.5rem;
      margin-bottom: 50px;
    }
    .subscription-form {
      margin: 20px 0;
      width: 520px;
      min-height: 300px;
      border-radius: 20px;
      padding: 50px;
      background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
      backdrop-filter: blur(5px);
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
      border-top: 2px solid rgba(255, 255, 255, 0.6);
      border-left: 2px solid rgba(255, 255, 255, 0.6);
      .subscription-title {
        color: var(--dark-primary);
        font-weight: 600;
        font-size: 1.2rem;
        margin-bottom: 1rem;
      }
      .subscription-txt {
        line-height: 1.5;
        letter-spacing: 2px;
        font-size: 14px;
        color: var(--ink);
        text-indent: 2rem;
        &.tip {
          padding-top: 5px;
          font-size: 12px;
          text-indent: unset;
        }
      }
      .subscription-inp {
        width: 75%;
        border-radius: 5px;
        position: relative;
        input {
          border-radius: 5px;
          background-color: var(--white);
          width: 100%;
          height: 40px;
          border: none;
          outline: none;
          padding: 5px 15px;
        }

        .warning-tip {
          position: absolute;
          width: 100%;
          left: 0;
          bottom: -20px;
        }
      }
      .subscription-btn {
        flex: 1;
        height: 40px;
        margin-left: 10px;
        position: relative;
      }
    }
  }
}

// .empty-tip {
//   position: absolute;
//   z-index: 10;
//   width: 150px;
//   height: 60px;
//   background-color: var(--dark-primary);
//   padding: 10px 15px;
//   top: -75px;
//   left: 50%;
//   transform: translateX(-50%);
//   border-radius: 5px;
//   visibility: hidden;
//   &.show {
//     animation: bounceOut 1s forwards;
//   }
//   &::before {
//     position: absolute;
//     left: 50%;
//     bottom: -20px;
//     transform: translateX(-50%);
//     content: "";
//     width: 0;
//     height: 0;
//     border: 10px solid var(--dark-primary);
//     border-bottom-color: transparent;
//     border-left-color: transparent;
//     border-right-color: transparent;
//   }
// }
// @keyframes bounceOut {
//   0% {
//     visibility: hidden;
//     top: 25px;
//   }
//   80% {
//     top: -85px;
//   }
//   100% {
//     visibility: visible;
//     top: -75px;
//   }
// }
